
<style type="text/css">  

</style>

<div id="page-wrapper">
            <div class="row">
            <img src="<?php echo base_url() ?>bootstrap/tot/bnnr-eservice1.jpg" class="img-responsive" alt="Responsive image">
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div style="float:left">กราฟสถิติการติดตั้ง Line Service</div>
                            <div style="float: right">เลือกปี : <select name="year" id="year" onChange="selectURL(this.options[this.selectedIndex].value);" class="form-control">
        <?  for($y = 2556;$y<=2580;$y++){ ?>
          <option value="<?=$y;?>" <?=($year==$y ? 'selected="selected"' : '');?>><?=$y;?></option>
          <? } ?>
      </select></div>
                            <div style="clear:both"></div>
                        </div>
                        <div class="row">
                          
                            <div class="panel-body">
								<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
     
                            </div><!-- /.row -->
                        </div><!--panel body-->
                    </div><!--panel primary-->     
                </div><!---clo-lg-12--> 
            </div><!--row-->
</div>      <!-- /#page-wrapper -->


<script type="text/javascript" src="<?php echo base_url() ?>bootstrap/highcharts/highcharts.js"></script>
<script> 
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'กราฟสถิติการติดตั้ง Line Service'
            },
            subtitle: {
                text: 'Line Service'
            },
            xAxis: {
                categories: [
					'ม.ค.',
                    'ก.พ.',
                    'มี.ค.',
                    'เม.ย.',
                    'พ.ค.',
                    'มิ.ย.',
                    'ก.ค.',
                    'ส.ค.',
                    'ก.ย.',
					'ต.ค.',
                    'พ.ย.',
                    'ธ.ค.'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'จำนวนเงิน (บาท)'
                },
				
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} ครั้ง</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
					dataLabels: {
                        enabled: true
                    }
                }
            },
			
            series: [{
                name: 'เดือน',
                data: [49, 71, 106, 129, 144, 176, 135, 148, 216, 194, 95, 54]
            }]
        });
    });
    
	
	function selectURL(id){
		if(id!=""){
			window.top.location.href = '<?php echo base_url() ?>index.php/admin/report/chart_line_equip/'+id;
		}
	}


</script>  
